<template>
  <div class="type-box">
    <router-view></router-view>
    <div class="content">
      <div class="search">
        <span>成都<van-icon name="arrow-down" /></span>
        <van-search
          v-model="value"
          background="#fff"
          shape="round"
          placeholder="请输入搜索关键词"
        />
        <em><van-icon name="scan" /></em>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#CCC">
        <van-swipe-item v-for="item in banner" :key="item.path">
          <div class="my-swipe-img">
            <img :src="`http://localhost:15666/${item.path}`" />
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="box">
        <div class="img-box">
          <img src="../../images/pt.jpg" alt="" />
          <span>拼团</span>
        </div>
        <div class="img-box">
          <img src="../../images/sc.jpg" alt="" />
          <span>商城</span>
        </div>
        <div class="img-box">
          <img src="../../images/hb.jpg" alt="" />
          <span>红包</span>
        </div>
        <div class="img-box">
          <img src="../../images/lj.jpg" alt="" />
          <span>领券</span>
        </div>
        <div class="img-box">
          <img src="../../images/ms.jpg" alt="" />
          <span>秒杀</span>
        </div>
      </div>
      <div class="kb">
        <div class="left">快报</div>
        <div class="right">
          <span>店加优选</span>
          <strong>更多<van-icon name="arrow" /></strong>
        </div>
      </div>
      <div class="title">
        <div>
          热门商品<span>更多<van-icon name="arrow" /></span>
        </div>
      </div>
      <div class="list-box">
        <van-swipe :show-indicators="false" :loop="false" :width="110">
          <van-swipe-item v-for="it in hotList" :key="it.id" >
            <div class="img" >
              <img :src="`http://localhost:15666/${it.cover}`" />
            </div>
            <div class="hotList-text" >
              <span>{{ it.project_name }}</span>
              <strong>￥{{ it.price_low }}</strong>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title">
        <div>
          精选商品<span>更多<van-icon name="arrow" /></span>
        </div>
      </div>

      <div class="list-content">
        <van-card
          @click="jpEvt(it.id)"
          v-for="it in jpList"
          :key="it.city_id"
          num="1"
          :price="it.dur"
          :desc="it.cat"
          :title="it.name"
          :thumb="`http://localhost:15666/${it.img}`"
        />
      </div>
    </div>
  </div>
</template>
<script>
import {
  bannerApi,
  getDetailHotListApi,
  getDetailListApi,
  getHotListApi,
  getListApi,
} from "../../apis/homeApi";
export default {
  data() {
    return {
      value: "",
      banner: [],
      hotListObj: { page: 1, size: 10, cat: "", name: "" },
      hotList: [],
      jpList: [],
      listObj: { page: 1, size: 20, ipRightName: "", name: "" },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let bannerRes = await bannerApi();
      this.banner = bannerRes.data;

      let hotListRes = await getHotListApi(this.hotListObj);
      this.hotList = hotListRes.data.rows;

      let list = await getListApi(this.listObj);
      this.jpList = list.data.rows;
    },
    async jpEvt(id) {
      let res = await getDetailListApi(id);
      let myData = sessionStorage.getItem("myData");
      if (!myData) {
        sessionStorage.setItem("myData", JSON.stringify(res));
        this.$router.push("/details");
        return;
      }
      sessionStorage.removeItem("myData");
      sessionStorage.setItem("myData", JSON.stringify(res));
      this.$router.push("/details");
    },
  },
  hotEvt() {
    // let res = await getDetailHotListApi(id);
    // console.log(res);
    // let myData = sessionStorage.getItem("myData");
    // if (!myData) {
    //   sessionStorage.setItem("myData", JSON.stringify(res));
    //   this.$router.push("/details");
    //   return;
    // }
    // sessionStorage.removeItem("myData");
    // sessionStorage.setItem("myData", JSON.stringify(res));
    // this.$router.push("/details");
  },
};
</script>
<style lang="less" scoped>
.type-box {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  .content {
    display: block;
    position: relative;
    width: 100%;
    height: calc(100% - 50px);
    background: #f8f8f8;
    overflow-x: hidden;
    .search {
      padding: 0 10px;
      display: flex;
      position: relative;
      width: 100%;
      height: 54px;
      background: #fff;
      margin-bottom: 10px;
      span {
        display: block;
        flex: 0 0 60px;
        font-size: 0.7rem;
        line-height: 54px;
        text-align: center;
      }
      .van-search {
        flex: 1;
      }
      em {
        display: block;
        flex: 0 0 30px;
        line-height: 54px;
      }
    }
    .my-swipe {
      display: block;
      position: relative;
      width: 100%;
      margin-bottom: 10px;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .box {
      display: flex;
      width: 100%;
      height: 80px;
      background: #fff;
      .img-box {
        width: 20%;
        height: 100%;
        text-align: center;
        img {
          margin-top: 6px;
          width: 42px;
          height: 42px;
        }
        span {
          display: block;
          font-size: 0.7rem;
        }
      }
    }
    .kb {
      display: flex;
      width: 90%;
      height: 32px;
      background: #fff;
      border-radius: 10px;
      padding: 5px 0;
      margin: 10px auto;
      .left {
        flex: 0 0 80px;
        text-align: center;
        border-right: 1px solid #ccc;
        line-height: 22px;
        font-size: 0.8rem;
        color: #f5645a;
      }
      .right {
        justify-content: space-between;
        flex: 1;
        padding: 0 10px;
        display: flex;
        strong,
        span {
          font-size: 0.6rem;
          display: block;
          line-height: 22px;
          font-weight: normal;
        }
      }
    }
    .title {
      width: 96%;
      margin: auto;

      div {
        width: 100%;
        font-size: 1rem;
        line-height: 52px;
        background: #fff;
        padding-left: 10px;
        span {
          font-size: 0.7rem;
          float: right;
          margin-right: 20px;
          font-weight: 400;
          line-height: 52px;
        }
      }
    }
    .list-box {
      display: block;
      position: relative;
      width: 96%;
      margin: auto;
      background: #fff;
      margin-bottom: 10px;
      .van-swipe {
        .van-swipe-item {
          margin-right: 6px;
          .img {
            img {
              width: 110px;
              height: 144px;
              vertical-align: middle;
            }
          }
        }
        .hotList-text {
          background: #fff;
          height: 55px;
          span,
          strong {
            display: block;
            font-size: 0.6rem;
          }
          strong {
            font-size: 0.7rem;
            margin: 10px;
          }
          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 4px;
            text-indent: 1em;
          }
        }
      }
    }
    .list-content {
      display: block;
      position: relative;
      width: 96%;
      height: 100%;
      margin: auto;
      .van-card {
        background: #fff;
      }
    }
  }
}
</style>
